<template>
  <div>
    <!-- 页面标题和修改按钮 -->
    <div class="title-container">
      <h2 class="header-title">项目概览</h2>
      <el-button size="small" type="primary" @click="dialogTableVisible = true;form=project">编辑项目</el-button>
    </div>
    <!-- 第一行：项目信息 -->
    <el-row>
      <el-col>
        <div class="grid-content">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="3" border
                           title="项目信息">
            <el-descriptions-item
              v-for="(item, index) in projectInfo"
              :key="index"
              :label="item.label"
            >
              <template v-if="item.type === 'type'">
                <dict-tag :options="dict.type.project_status" :value="item.value"/>
              </template>
              <template v-else-if="item.type === 'priority'">
                <dict-tag :options="dict.type.priority" :value="item.value"/>
              </template>
              <template v-else-if="item.type === 'link'">
                <el-link :href="item.value" target="_blank">{{ item.value }}</el-link>
              </template>
              <template v-else-if="item.type === 'head'">
                <user-and-avatar :userId="item.value"/>
              </template>
              <template v-else>{{ item.value }}</template>
            </el-descriptions-item>
            <el-descriptions-item label="项目进度">
              <el-progress :percentage="getProgressPercentage" :stroke-width="20"
                           :text-inside="true"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行：公告和统计组件 -->
    <el-row>
      <el-col :span="10">
        <div class="grid-content">
          <div class="section-title">项目公告</div>
          <el-table
            :data="announcements"
            border
            style="width: 100%"
            @row-click="showAnnouncement"
          >
            <el-table-column label="标题" prop="title" width="280"></el-table-column>
            <el-table-column label="发布时间" prop="createdAt">
              <template #default="scope">{{ formatDateDay(scope.row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="创建人" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.createdBy"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  type="text"
                  @click.stop="showAnnouncement(scope.row)"
                >查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content">
          <work-item-statistics :works="works"/>
        </div>
      </el-col>
    </el-row>

    <!-- 第三行：项目描述和附件 -->
    <el-row>
      <el-col :span="12">
        <div class="grid-content">
          <div class="title-container">
            <div class="section-title">项目描述</div>
            <el-button type="text" @click="this.dialogTableVisible = true;">
              <i class="el-icon-edit"></i>
            </el-button>
          </div>
          <div class="content-box" v-html="project.description"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <div class="section-title">附件列表</div>
          <el-table
            :data="attachment"
            border
            style="width: 100%"
            @row-click="showAttachment"
          >
            <el-table-column label="标题" prop="title" width="380"></el-table-column>
            <el-table-column label="发布时间" prop="createdAt">
              <template #default="scope">{{ formatDateDay(scope.row.createdAt) }}</template>
            </el-table-column>
            <el-table-column label="创建人" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.createdBy"></user-and-avatar>
              </template>
            </el-table-column>
            <!--            <el-table-column label="审核状态" prop="reviewStatus"></el-table-column>-->
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  type="text"
                  @click.stop="showAttachment(scope.row)"
                >查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 第四行：工作项完成趋势 -->
    <el-row>
      <el-col>
        <div class="grid-content">
          <work-item-completion-trend :works="works"/>
        </div>
      </el-col>
    </el-row>
    <!-- 公告详情弹窗 -->
    <el-dialog
      :visible.sync="showAnnouncementValue"
      title="公告详情"
      width="600px"
    >
      <div>
        <h3>{{ currentAnnouncement.title }}</h3>
        <p>
          <strong>发布时间：</strong>{{ formatDateDay(currentAnnouncement.announcementDate) }}</p>
        <p style="display: flex;align-items: center;gap: 8px;">
          <strong>添加人：</strong>
          <user-and-avatar :user-id="currentAnnouncement.createdBy"></user-and-avatar>
        </p>
        <hr/>
        <div class="content-box" v-html="currentAnnouncement.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAnnouncementValue = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="showAttachmentValue"
      title="附件详情"
      width="1400px"
    >
      <div>
        <h3>{{ currentAnnouncement.title }}</h3>
      </div>
      <FileShow :url="currentAttachment.fileUrl"></FileShow>
    </el-dialog>
    <el-dialog title="修改项目信息" :visible.sync="dialogTableVisible" append-to-body width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-layout">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择项目状态">
                <el-option
                  v-for="dict in dict.type.project_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目预算" prop="budget">
              <el-input v-model="form.budget" placeholder="请输入项目预算"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="风险评估描述" prop="riskAssessment">
              <el-input v-model="form.riskAssessment" placeholder="请输入风险评估描述"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目优先级" prop="priority">
              <el-select v-model="form.priority" placeholder="请选择项目优先级">
                <el-option
                  v-for="dict in dict.type.priority"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Git 仓库链接" prop="gitRepositoryUrl">
              <el-input v-model="form.gitRepositoryUrl" placeholder="请输入Git 仓库链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目文档链接" prop="documentationUrl">
              <el-input v-model="form.documentationUrl" placeholder="请输入项目文档链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设计文档链接" prop="designDocsUrl">
              <el-input v-model="form.designDocsUrl" placeholder="请输入设计文档链接"/>
            </el-form-item>
          </el-col>

          <!-- 富文本编辑器放到最下面 -->
          <el-col :span="24">
            <el-form-item label="项目描述">
              <editor v-model="form.description" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProject">确 定</el-button>
        <el-button @click="dialogTableVisible=false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import workItemStatistics from "@/views/project/init/overview/workItemStatistics.vue";
import WorkItemCompletionTrend from "@/views/project/init/overview/workItemCompletionTrend.vue";
import {getProjectById, updateProject} from "@/api/projectUser/userProjects";
import {listProjectAnnouncement} from "@/api/projectUser/userProjectAnnouncement";
import {formatDateDay} from "@/utils/ruoyi";
import {listProjectAttachment} from "@/api/projectUser/userProjectAttachment";
import FileShow from "@/components/FileShow/index.vue";
import UserAssignment from "@/views/project/init/userAssignment/index.vue";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {listAllWork} from "@/api/projectUser/userWork";


export default {
  name: "overview",
  components: {UserAndAvatar, UserAssignment, FileShow, WorkItemCompletionTrend, workItemStatistics},
  dicts: ['project_status', 'priority'],
  props: ["projectId"],
  data() {
    return {
      form: {},
      works: [],
      announcements: [], // 公告列表
      attachment: [],//附件
      currentAnnouncement: {}, // 当前查看的公告
      currentAttachment: {}, //当前附件
      showAnnouncementValue: false, // 弹窗可见性
      showAttachmentValue: false, // 弹窗可见性
      project: {},
      dialogTableVisible: false,
      rules: {
        name: [
          {required: true, message: "项目名称不能为空", trigger: "blur"}
        ],
        status: [
          {required: true, message: "项目状态不能为空", trigger: "change"}
        ],
        priority: [
          {required: true, message: "项目优先级不能为空", trigger: "change"}
        ],
        progressPercentage: [
          {required: true, message: "项目进度不能为空", trigger: "blur"}
        ],
        createdAt: [
          {required: true, message: "创建时间不能为空", trigger: "blur"}
        ],
        createdBy: [
          {required: true, message: "创建人ID不能为空", trigger: "blur"}
        ],
        updatedAt: [
          {required: true, message: "更新时间不能为空", trigger: "blur"}
        ],
        updatedBy: [
          {required: true, message: "更新人ID不能为空", trigger: "blur"}
        ]
      },
    };
  },
  computed: {
    projectInfo() {
      return [
        {label: "项目ID", value: this.project.projectId},
        {label: "项目名称", value: this.project.name},
        {label: "状态", value: this.project.status, type: "type"},
        {label: "负责人ID", value: this.project.leaderId, type: "head"},
        {label: "预算", value: `${this.project.budget} 元`},
        {label: "优先级", value: this.project.priority, type: "priority"},
        {label: "风险评估", value: this.project.riskAssessment},
        {label: "Git 仓库", value: this.project.gitRepositoryUrl, type: "link"},
        {label: "项目文档", value: this.project.documentationUrl, type: "link"},
        {label: "设计文档", value: this.project.designDocsUrl, type: "link"},
        {label: "开始日期", value: this.formatDateDay(this.project.startDate)},
        {label: "结束日期", value: this.formatDateDay(this.project.endDate)},
        {label: "创建时间", value: this.formatDateDay(this.project.createdAt)},
        {label: "更新时间", value: this.formatDateDay(this.project.updatedAt)},
      ];
    },
    getProgressPercentage() {
      console.log(this.works);
      if (this.works.length === 0) {
        return 0;
      }
      console.log(this.works.filter(work => work.status === '3').length / this.works.length * 100);
      return this.works.filter(work => work.status === '3').length / this.works.length * 100;
    }
  },
  created() {
    this.getProjectInfo();
  },
  methods: {
    formatDateDay,
    getProjectInfo() {
      getProjectById(this.projectId).then(({data}) => {
        this.project = data;
      })
      listAllWork(this.projectId, {}).then(({data}) => {
        this.works = data
      })
      listProjectAttachment(this.projectId).then(({rows}) => {
        this.attachment = rows;
      })
      listProjectAnnouncement(this.projectId, null).then(({rows}) => {
        this.announcements = rows;
      })
    },
    // 展示公告详情
    showAnnouncement(row) {
      this.currentAnnouncement = row;
      this.showAnnouncementValue = true;
    },
    showAttachment(row) {
      this.currentAttachment = row;
      this.showAttachmentValue = true;
    },

    submitProject() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateProject(this.project).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogTableVisible = false;
          });
        }
      });

    }
  },

};
</script>

<style lang="scss" scoped>
.grid-content {
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #d3dce6;
  background-color: #f9f9f9;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.content-box {
  flex: 1;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-layout .el-form-item {
  margin-bottom: 20px;
}

.form-layout .el-row {
  margin-bottom: 10px;
}

.form-layout .el-col {
  display: flex;
  flex-direction: column;
}

.form-layout .el-input, .form-layout .el-select {
  width: 100%;
}
</style>
